<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" title="订单确认" @clickLeft="leftBack" background-color="#318cff" color="#fff"></uni-nav-bar>
		<navigator url="/pages/home/address" hover-class="navigator-hover" class="dfj-bg-white dfj-mg-tb-20 dfj-bd-radius-20 dfj-flex dfj-flex-ai-c dfj-pd-20">
			<view class=""><image style="width: 80rpx;height: auto;" mode="widthFix" src="/static/img/home/c_OrderAddress.png"/></view>
			<view class="dfj-flex-1 dfj-pd-lr-20" v-if="address">
				<view class="dfj-flex dfj-flex-ai-c dfj-mg-b-15">
					<view class="dfj-f-35 dfj-t-333">{{ address.userName }}</view>
					<view class="dfj-f-26 dfj-t-666 dfj-mg-l-30">{{ address.mobilePhone }}</view>
				</view>
				<view class="dfj-t-999 dfj-f-26">{{ address.addressProvince }}{{ address.addressCity }}{{ address.addressCounty }}{{ address.address }}</view>
			</view>
			<view class="dfj-flex-1 dfj-pd-lr-20 dfj-t-666" v-else>请选择收货地址</view>
			<view>
				<text class="dfj-icon icon-arrow-right dfj-f-35"></text>
			</view>
		</navigator>
		
		<view class="dfj-bg-white dfj-bd-radius-20 dfj-overflow-hide">
			<view class="dfj-pd-30 dfj-f-30 dfj-t-666">
				<text class="dfj-icon icon-shangjia dfj-mg-r-20"></text> 自营
			</view>
			<template v-for="(item,index) in infos">
				<view class="dfj-pd-30 dfj-flex dfj-flex-ai-c" :key="index">
					<view class="">
						<image style="width: 220rpx;height: auto;" mode="widthFix" :src="item.iconUrl"></image>
					</view>
					<view class="dfj-flex-1 dfj-mg-l-30">
						<view class="dfj-t-999 dfj-t-ellipsis dfj-t-ellipsis-2">{{ item.productTitle }}</view>
						<view class="dfj-flex dfj-flex-ai-c dfj-mg-t-20">
							<view class="dfj-flex-1 dfj-t-danger dfj-f-35">￥{{ item.productPrice }}</view>
							<view><uni-number-box :min="1" :value="item.amount" @change="bindChange($event,index)" ></uni-number-box></view>
						</view>
					</view>
				</view>
			</template>
		</view>
		
		<view class="dfj-bg-white dfj-bd-radius-20 dfj-overflow-hide dfj-mg-t-20 dfj-pd-lr-30 dfj-t-666 dfj-pd-tb-15">
			<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-8">
				<view class="dfj-flex-1">配送</view>
				<view>商家配送，支付完成后尽快为您发货</view>
			</view>
			<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-8">
				<view class="dfj-flex-1">运费</view>
				<view>包邮</view>
			</view>
			<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-8">
				<view class="dfj-flex-1">商品总额</view>
				<view class="dfj-t-danger">￥{{ total }}</view>
			</view>
			<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-8">
				<view class="">买家留言</view>
				<view class="dfj-flex-1 dfj-pd-lr-20"><input type="text" class="dfj-f-26" placeholder="请输入买家留言" v-model="txtValue"></view>
			</view>
		</view>
		
		<view class="confirm-order-fixed dfj-flex dfj-flex-ai-c dfj-pd-lr-20 dfj-pd-tb-15">
			<view class="dfj-flex-1 dfj-t-666">
				实付金额 <text class="dfj-t-danger dfj-f-35 dfj-mg-l-20">￥{{ total }}</text>
			</view>
			<view hover-class="navigator-hover">
				<button class="confirm-order-bottom " type="primary" size="mini" @click="postInfo()">提交订单</button>
			</view>
			<!-- <navigator url="/pages/home/pay" hover-class="navigator-hover">
				<button class="confirm-order-bottom " type="primary" size="mini" @click="postInfo()">提交订单</button>
			</navigator> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1,
				txtValue: '',
				address: '',
				infos: [],
				isCar: '',
				checkboxList: '',
				loginInfo: ''
			}
		},
		computed: {
			total() {
				let num = '0.00';
				this.infos.map((item,index)=>{
					num = Number(num) + Number(item.productPrice) * Number(item.amount)
				})
				return num
			}
		},
		onLoad(options) {
			this.isCar = options.isCar
			this.checkboxList = options.checkboxList
			
			this.loginInfo = JSON.parse(localStorage.getItem('loginInfo'))
		},
		onShow() {
			let setAddress = JSON.parse(sessionStorage.getItem('setAddress'))
			let infoAddress = JSON.parse(localStorage.getItem('loginInfo')).userInfo.address
			if(setAddress){
				this.address = setAddress
			}else{
				this.address = infoAddress
			}
			this.infos = JSON.parse(sessionStorage.getItem('infos'))
		},
		methods:{
			postInfo() {
				if(this.loginInfo.userInfo.setPayPwd == 0){
					uni.showToast({
						title: '请先去设置支付密码',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.hideToast();
						uni.navigateTo({
							url: '/pages/my/set-payment-code'
						})
					},1000)
					return false;
				}
				if(this.isCar == true){ //购物车购买
					this.$http({
						url: '/order/genOrder',
						data: {
							addressId: this.address.id,
							infos: this.checkboxList
						}
					}).then(res=> {
						uni.navigateTo({
							url: `/pages/home/pay?orderNo=${res.data.orderNo}&orderMoney=${res.data.orderMoney}`
						})
					})
				}else{ //详情购买
					this.$http({
						url: '/order/immediatelyGenOrder',
						data: {
							productId: this.infos[0].pId,
							amount: this.infos[0].amount,
							addressId: this.address.id
						}
					}).then(res=> {
						uni.navigateTo({
							url: `/pages/home/pay?orderNo=${res.data.orderNo}&orderMoney=${res.data.orderMoney}`
						})
					})
				}
			},
			leftBack() {
				uni.navigateBack();
			},
			bindChange(e,i) {
				if(this.isCar == 'true'){
					if(this.infos[i].amount != e){
						this.$http({
							url: '/shopCart/addProductToShoppingCart',
							data: {
								amount: e,
								productId: this.infos[i].productId
							}
						}).then(res=> {
							this.infos[i].amount = e
						})
					}
				}else{
					this.infos[i].amount = e
				}
			}
		}
	}
	
	
</script>

<style lang="scss" scoped>
	.confirm-order-fixed{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		z-index: 9;
		.confirm-order-bottom{
			background: #318CFF;
			border-radius: 30rpx;
			vertical-align: top;
		}
	}
</style>
